<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .dialog{
            position:absolute;
            right: 100px;
            top: 100px;
            width: 200px;
            height: 150px;
            background-color: #ccc;
        }
        .title{
            display: flex;
            align-items: center;
            padding: 5px;
            box-sizing: border-box;
            height: 30px;
            background-color: skyblue;
            color: white;
            justify-content: space-between;
        }
        .close{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- <button @click="visiable=true">注册</button>
        <div class="dialog" v-show="visiable">
            <div class="title">
                <div>用户注册</div>
                <div class="close" @click="visiable=false">&times;</div>
            </div>
        </div> -->
        <button @click="show">注册</button>
        <div class="dialog" v-show="visiable">
            <div class="title">
                <div>用户注册</div>
                <div class="close" @click="close">&times;</div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el:'#root',
            data(){
                return{
                    visiable:false //通过这个变量来控制模态框的隐藏或显示
                }
            },
            methods: {
                show(){
                    //这里如果要调用data中的数据，需要使用this才能得到
                   this.visiable=true 
                },
                close(){
                    this.visiable=false
                }
            },
        })
    </script>
</body>
</html>